<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .item>img{
            width: 300px;
        }
        #app{
            overflow: hidden;
        }
        .item{
            padding: 10px;
            border: 1px solid #777;
            float: left;
            font-size: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="item"><img src="images/01.jpg" alt=""></div>
        <div class="item"><img src="images/02.jpg" alt=""></div>
        <div class="item"><img src="images/03.jpg" alt=""></div>
        <div class="item"><img src="images/04.jpg" alt=""></div>
        <div class="item"><img src="images/05.jpg" alt=""></div>
        <div class="item"><img src="images/06.jpg" alt=""></div>
        <div class="item"><img src="images/07.jpg" alt=""></div>
        <div class="item"><img src="images/08.jpg" alt=""></div>
        <div class="item"><img src="images/09.jpg" alt=""></div>
        <div class="item"><img src="images/10.jpg" alt=""></div>
        <div class="item"><img src="images/11.jpg" alt=""></div>
        <div class="item"><img src="images/12.jpg" alt=""></div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
    var colCount //定义列数
    var colHeightArry = [] //定义列高度数组
    var imgWidth = $('.item img').outerWidth(true) //单张图片的宽度

    colCount = parseInt($('.item').width() / imgWidth) //计算出列数
    for (var i = 0; i < colCount; i++) {
        colHeightArry[i] = 0;
    }
    //[0,0,0]

    $('.item img').on('load', function () {

        var minValue = colHeightArry[0] //定义最小的高度
        var minIndex = 0 //定义最小高度的下标
        for (var i = 0; i < colCount; i++) {
            if (colHeightArry[i] < minValue) { //如果最小高度组数中的值小于最小值
                minValue = colHeightArry[i] //那么认为最小高度数组中的值是真正的最小值
                minIndex = i //最小下标为当前下标
            }
        }

        $(this).css({
            left: minIndex * imgWidth,
            top: minValue
        })
        colHeightArry[minIndex] += $(this).outerHeight(true)
    })


    //当窗口大小重置之后，重新执行
    $(window).on('resize', function () {
        reset()
    })


    //当窗口加载完毕，执行瀑布流
    $(window).on('load', function () {
        reset()
    })

    //定义reset函数
    function reset() {
        var colHeightArry = []
        colCount = parseInt($('.item').width() / imgWidth)
        for (var i = 0; i < colCount; i++) {
            colHeightArry[i] = 0
        }
        $('.item img').each(function () {
            var minValue = colHeightArry[0]
            var minIndex = 0
            for (var i = 0; i < colCount; i++) {
                if (colHeightArry[i] < minValue) {
                    minValue = colHeightArry[i]
                    minIndex = i
                }
            }

            $(this).css({
                left: minIndex * imgWidth,
                top: minValue
            })
            colHeightArry[minIndex] += $(this).outerHeight(true)
        })
    }
</script>
</body>
</html>

